/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="set-finish__container">
        <div class="set__box">
            <div class="common-title">
                <lang>选择数据</lang>
            </div>
            <div class="common-content-box">
                <div class="common-content">
                    <div class="left-title">
                        <lang>训练数据：</lang>
                    </div>
                    <div class="right-content">
                        {{ trainColumnsText }}
                    </div>
                </div>
                <div class="common-content">
                    <div class="left-title">
                        <lang>标签数据：</lang>
                    </div>
                    <div class="right-content">
                        {{ labelColumnsText }}
                    </div>
                </div>
            </div>
        </div>
        <div class="set__box">
            <div class="common-title">
                <lang>算法模板配置</lang>
            </div>
            <div class="common-content-box">
                <div class="common-content">
                    <div class="left-title">
                        <lang>任务名称：</lang>
                    </div>
                    <div class="right-content">
                        {{ algorithmObj.taskName }}
                    </div>
                </div>
                <div class="common-content">
                    <div class="left-title">
                        <lang>算法模板：</lang>
                    </div>
                    <div class="right-content">
                        {{ algorithmObj.isAutoMl===1 ? _('快速算法'):algorithmObj.algorithmName }}
                    </div>
                </div>
            </div>
            <div v-if="configJsonList.length && algorithmObj.isAutoMl!==1"
                 class="sub-content-box">
                <div
                    v-for="(item,index) in configJsonList"
                    :key="index"
                    :title="item.description"
                    class="sub-content">
                    {{ item.paramName }}：{{ item.value }}
                </div>
            </div>
            <!-- <div class="special-content">
                <div class="left-title">
                    <lang>定时更新：</lang>
                </div>
                <div class="right-content">
                    <div v-if="!!algorithmObj.periodic">
                        <lang>启用</lang>
                    </div>
                    <div v-else>
                        <lang>禁用</lang>
                    </div>
                </div>
            </div> -->
            <!-- <div v-if="!!algorithmObj.periodic"
                 class="sub-content-box">
                <div class="sub-content">
                    <lang>执行时间：</lang>{{ translateTime(algorithmObj.startTime) }}-{{ translateTime(algorithmObj.endTime) }}
                </div>
                <div class="sub-content">
                    <lang>更新周期：</lang>
                    {{ algorithmObj.timeLength }}{{ timeUnit }}
                </div>
                <div class="sub-content">
                    <lang>数据源时间字段：</lang>
                    {{ algorithmObj.dataField }}
                </div>
                <div class="sub-content">
                    <lang>数据源取值范围：</lang>
                    {{ algorithmObj.dataLength }}{{ dataUnit }}
                </div>
            </div> -->
            <div class="special-content">
                <div class="left-title">
                    <lang>描述：</lang>
                </div>
                <div class="right-content">
                    {{ algorithmObj.description }}
                </div>
            </div>
        </div>
        <div class="set__box">
            <div class="common-title">
                <lang>训练资源配置</lang>
            </div>
            <div class="common-content-box wrap">
                <div class="common-content">
                    <div class="left-title">
                        <lang>CPU：</lang>
                    </div>
                    <div class="right-content">
                        {{ resourceObj.cpuNum }}<lang>核</lang>
                    </div>
                </div>
                <div class="common-content">
                    <div class="left-title">
                        <lang>GPU：</lang>
                    </div>
                    <div class="right-content">
                        {{ resourceObj.gpuNum }}<lang>个</lang>
                    </div>
                </div>
                <div class="common-content">
                    <div class="left-title">
                        <lang>内存：</lang>
                    </div>
                    <div class="right-content">
                        {{ resourceObj.memorySize }}<lang>GB</lang>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang=ts>
import { Vue, Prop, Component } from 'vue-property-decorator';
import parseJson from 'src/util/parse_json';
import {
    TIME_UNIT_LIST
} from 'src/home/mod_cluster/project_manager/feature_manager/const_data';

import moment from 'moment';

@Component
export default class SetFinish extends Vue {

    // TODO: REMOVE ANY
    @Prop({
        type:Object,
        default:()=>{
            return {

            };
        }
    }) trainingObj!: SafeAny

    // TODO: REMOVE ANY
    @Prop({
        type:Object,
        default:()=>{
            return {

            };
        }
    }) algorithmObj!: SafeAny

    // TODO: REMOVE ANY
    @Prop({
        type:Object,
        default:()=>{
            return {

            };
        }
    }) resourceObj!: SafeAny

    get trainColumnsText () {
        return this.trainingObj.trainColumns ? `${this.trainingObj.trainColumns.length}个` : 0;
    }
    get labelColumnsText () {
        return this.trainingObj.labelColumns ? `${this.trainingObj.labelColumns.length}个` : _('0个');
    }
    get timeUnit () {
        let unit = '';
        if (this.algorithmObj.timeUnit) {
            unit = TIME_UNIT_LIST.filter(item=> item.value === this.algorithmObj.timeUnit)[0].label;
        }
        return unit;
    }
    get dataUnit () {
        let unit = '';
        if (this.algorithmObj.dataUnit) {
            unit = TIME_UNIT_LIST.filter(item=> item.value === this.algorithmObj.dataUnit)[0].label;
        }
        return unit;
    }
    get configJsonList () {
        let list = [];
        if (this.algorithmObj.configJson) {
            list = parseJson(this.algorithmObj.configJson);
        }
        return list;
    }

    translateTime (time: string) {
        let value = `${moment(time).format('YYYY-MM-DD HH:mm:ss')}`;
        return value;
    }
};

</script>
<style lang="less">
    .set-finish__container{
        padding: 30px  0;
        margin-left: 77px;
        .set__box{
            margin-bottom: 15px;
            .common-title{
                font-weight: bold;
                color: #14161A;
                font-size: 14px;
                margin-bottom:5px;
            }
            .left-title{
                width: 75px;
            }
            .right-content{
                color: #14161A;
                display: flex;
            }
            .common-content-box{
                    /* margin-left: 24px; */
                display: flex;
                &.column{
                    flex-direction: column;
                }
                &.wrap{
                    flex-wrap: wrap;
                }
            }
            .special-content{
                display: flex;
                font-size: 12px;
                margin: 10px 0;
            }
            .common-content{
                width: 320px;
                display: flex;
                font-size: 12px;
                margin: 10px 0;
            }
            .sub-content-box{
                margin-left: 74px;
                background: #FAFAFA;
                border: 1px solid #E0E0E0;
                padding: 10px;
                flex-wrap: wrap;
                width: 78%;
                padding-bottom: 0;
                max-height: 168px;
                overflow: auto;
                .sub-content{
                    margin-bottom:10px;
                }
            }
        }
    }
</style>
